<style scoped>
.wraper {
    padding: 0;
    margin-top: -20px;
}

.search {
    padding-left: 50px;
    display: inline-block;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
    height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}



/* 分页 start */

.pagestyle {
    margin: 20px 0;
    float:right;
    padding-right: 15px;
}


/* 分页 end */

.leftside{
    overflow-y: auto;
   
}
.leftside-search{
    padding: 10px;
    margin-bottom: 15px;
}
.rightside{
    border-left: 1px solid #e9eaec;
}
.leftside-list{
    overflow-y: auto;
}
.leftside-list ul li{
    padding: 10px;
    cursor: pointer;
}
.leftside-list ul li:hover{ 
    background: rgba(64,116,225,0.3);
    color:#4074e1;
    border-right: 4px solid #4074e1;
}
.leftside-list ul li:hover a{
    color:#4074e1;
}
.leftside-list .active,.leftside-list ul li.active:hover{
    background-color: #4074e1;
    color:#fff;
}
.leftside-list .active a,.leftside-list ul li.active:hover a{
    color: #fff;
}
.leftside-listspan{
    max-width: 75%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}
.leftside-edit{
    font-size: 18px;
}
.poptip-ul{
    color: #000;
}
.leftside-list ul li .poptip-ul li:hover{
    background-color: #4074e1;
    color:#fff;
}
.rightside-title{
    padding: 20px;
}
.rightside-title h3{
    display: inline-block;
    font-size: 18px;
    font-weight: normal;
}
.title-total{
    font-size: 14px;
    color: #999;
}
.fr{
    float: right;
}
.rightside-content{
    padding: 5px;
}
.fl{
    float: left;
}
.all{
    float: left;
    margin-left: 70px;
}
</style>


<template>
    <div class="member-manage">
        <product-title></product-title>
        <div class="wraper">
            <Row>
                <Col span="4">
                    <div class="leftside">
                        <div class="leftside-list" :style="leftHeight">
                            <ul>
                                <li v-for="(item,index) in ranklist" :key="item.id" :class="active == index ?'active':''" @click="leftActive(index)"><Icon type="document-text"></Icon>
                                    <span class="leftside-listspan">{{item.name}}</span>                                                                          
                                </li>                                                 
                            </ul>
                        </div>
                    </div>
                </Col>
                <Col span="20">
                    <div class="rightside" :style="rightHeight">
                        <div class="rightside-title">
                            <h3>{{rightTitle}}</h3>
                            <span class="title-total">（{{employeeTotal}}个）</span>
                            <div class="search">
                                <Input v-model="searchForm.name" placeholder="请输入代理人姓名" style="width: 140px"></Input>
                                <Input v-model="searchForm.job_num" placeholder="请输入代理人工号" style="width: 140px"></Input>
                                <DatePicker type="month" :options="options" v-model="searchForm.datetime"  format="yyyy-MM" placeholder="选择日期" style="width: 120px" @on-change="dateChange"></DatePicker>
                                <Button @click='search'>查询</Button>
                            </div>
                        </div>
                        <div class="rightside-content">
                            <Table border ref="selection" :columns="columns4" :data="data1"></Table>
                            <Page class-name="pagestyle" :total="employeeTotal" show-total @on-change="pageChange"></Page>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getRankList} from '../../api/rank'
import { getBonusList} from '../../api/settlement'
import { formatTime } from '../../libs/time'
export default {
    data() {
        return {
            options: {
                disabledDate (date) {
                    let _date = formatTime(new Date(),'yyyy-MM')
                    return date && date.valueOf() >= (new Date(_date).getTime() - 86400000)
                }
            },
            searchForm: {
                name: '',
                datetime:new Date(formatTime(new Date(),'yyyy-MM')).getTime() - 86400000,
            },
            ranklist:[],
            cou:-1,
            visible:false,
            listStyle: {                
                height: '300px'
            },
            role:{
                name:'',
                id:''
            },
            action: {
                active:[]
            },
            active:0,
            showAddModal:false,
            showactionModal:false,
            closeable:false,
            loading:true,
            leftHeight: {
                height: '0px'
            },
            rightHeight: {
                height: '0px'
            },
            rightTitle:'',
            page:1,
            employeeTotal:0,
            emplyee:[],
            columnsall: [ 
                {
                    title: '工号',
                    key: 'job_num',
                    align: 'center',
                },                  
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center',
                }                   
            ],
            columns4:[],
            data1: [
                
            ],
            rank_id:''
                
        }
    },
    components: {
        productTitle
    },
    created() {
        let winHeight = screen.availHeight;
        this.leftHeight.height = (winHeight  - 280 - 32) + 'px';
        this.rightHeight.height = (winHeight - 280) + 'px';
        let _time = new Date(formatTime(new Date(),'yyyy-MM')).getTime() - 86400000
        this.searchForm.date = formatTime(new Date(_time),'yyyy-MM') 
        this.getRankList()
    },
    methods: {
        search(){
            this.page = 1
            this.getList()
        },
        dateChange(date) {
            if(date){
                this.searchForm.date = date
                var dataarry = date.split("-")
                this.searchForm.year = dataarry[0]
                this.searchForm.month = dataarry[1]
            }else{
                this.searchForm.date = ''
            }
            
        },
        getRankList(){
            new Promise((resolve, reject) => {
                getRankList().then(response => {
                    if (response.data.err == 0) {
                        this.ranklist =  response.data.data
                        this.rank_id = this.ranklist[0].id
                        this.rightTitle = this.ranklist[0].name
                        this.getList()                     
                    } else {
                        this.$Message.error(response.data.info);
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getList(){
            let _params = {
                rank:this.rank_id,
                date:this.searchForm.date,
                job_num:this.searchForm.job_num,
                name:this.searchForm.name,
                p:this.page
            }          
            new Promise((resolve, reject) => {
                getBonusList(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        if(response.data.data.columns){
                            this.columns4 =  this.columnsall.concat( response.data.data.columns )
                        }else{
                            this.columns4 =  this.columnsall
                        }                        
                        this.data1 =  response.data.data.list  
                        this.employeeTotal = response.data.data.total        
                    } else {
                        this.$Message.error(response.data.info);
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        
        // 页码改变
        pageChange(page) {
            this.page = page
            this.getList()
        },

        leftActive(index){
            this.active = index
            this.rightTitle = this.ranklist[index].name
            this.rank_id = this.ranklist[index].id
            this.page = 1
            this.getList()
        },
        cancel(){
            this.showactionModal = false;
            this.action.active = []
        }
    }
}
</script>
